"use client";
// The docs chrome (top navbar + tab bar + left navigation) is interactive - the navbar's ⌘K search,
// the tab bar's sliding indicator, the command palette, and the active-page highlight all need the
// current pathname. `usePathname()` is a client hook, so this thin wrapper reads it once and forwards
// it (plus `next/link`) to the package components, laying them out around the routed `{children}`.
// `DocsSearchProvider` owns the one ⌘K palette that both the navbar button and the shortcut open.
import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { DocsLanguagePicker, DocsNavbar, DocsNavbarButton, DocsSearchProvider, DocsSidebar, DocsTabs } from "../../../../dist/react/index.js";
import type { LocaleConfig, NavTree } from "../../../../dist/index.js";
/** A small equalizer wordmark for the demo brand (a real app passes its own `logo`). */
function ScribekitLogo() {
return (
);
}
/**
* Renders the full docs shell for the demo: `DocsNavbar` (logo + "Docs" pill + ⌘K search) and
* `DocsTabs` on top, then a row of `DocsSidebar` beside the routed content - all inside a
* `DocsSearchProvider` so the navbar button and the ⌘K shortcut drive one palette.
*
* @param props.nav - the navigation tree for the current language (`docs.getNavTree(lang)`).
* @param props.lang - the render language, forwarded for the built-in label translations.
* @param props.children - the routed page (a `DocsPage` or `DocsIndex`).
*/
export function DocsChrome({
nav,
lang,
locales,
defaultLocale,
prefixDefaultLocale,
basePath,
children,
}: {
nav: NavTree;
lang: string;
locales: LocaleConfig[];
defaultLocale: string;
prefixDefaultLocale: boolean;
basePath: string;
children: ReactNode;
}) {
// The default locale (en) is served unprefixed at /docs/... (proxy.ts rewrites onto /en/docs/...),
// so nav hrefs are the clean /docs/... . `usePathname()` returns the clean path at runtime but the
// /en-prefixed one at build-time prerender; strip that prefix so the highlight matches in both.
const pathname = usePathname();
const activePath = pathname ? pathname.replace(/^\/en(?=\/|$)/, "") : undefined;
return (